<template>
  <div id="App">
    <h1>{{count}}</h1>
    <button @click="count++">+1</button>
  </div>
</template>
<script>

export default {
  name: "App",
  data() {
    return {
      count: 0
    }
  },
  beforeCreate() {
    //组件被创建之前
    console.log("beforeCreate")
  },
  created() {
    //组件创建完成(发送网络请求、事件监听等等)
    console.log("created")
  },
  beforeMount() {
    //组件挂载之前
    console.log("beforeMount")
  },
  mounted() {
    //组件挂载完毕(获取DOM元素)
    console.log("mounted")
  },
  beforeUpdate() {
    //数据发生改变，组件更新之前
    console.log("beforeUpdate")
  },
  updated() {
    //组件更新完毕
    console.log("updated")
  },
  beforeUnmount() {
    //组件卸载之前
    console.log("beforeUnmount")
  },
  unmounted() {
    //组件卸载完毕
    console.log("unmounted")
  }
}
</script>
<style lang="less">

</style>
